<template>
  <div id="app">
    <Sidebar
      :isCreateMenuVisible="isCreateMenuVisible"
      :isItemModalVisible="isItemModalVisible"
      :isLocationModalVisible="isLocationModalVisible"
      @toggleCreateMenu="toggleCreateMenu"
      @openItemModal="openItemModal"
      @openLocationModal="openLocationModal"
      @showOverview="showOverview"
      @showLocations="showLocations"
    />
    <component :is="currentComponent" />
    <ItemModal
      :isItemModalVisible="isItemModalVisible"
      :itemInfo="itemInfo"
      @closeItemModal="closeItemModal"
      @submitItemInfo="submitItemInfo"
    />
    <LocationModal
      :isLocationModalVisible="isLocationModalVisible"
      @closeLocationModal="closeLocationModal"
      @submitLocation="submitLocation"
    />
  </div>
</template>

<script>
import Sidebar from './components/Sidebar.vue';
import MainContent from './components/MainContent.vue';
import ItemModal from './components/ItemModal.vue';
import LocationModal from './components/LocationModal.vue';
import LocationsPage from './components/LocationsPage.vue';
import LocationEditPage from './components/LocationEditPage.vue';

export default {
  name: 'App',
  components: {
    Sidebar,
    MainContent,
    ItemModal,
    LocationModal,
    LocationsPage,
    LocationEditPage
  },
  data() {
    return {
      isCreateMenuVisible: false,
      isItemModalVisible: false,
      isLocationModalVisible: false,
      itemInfo: {
        type: '',
        name: '',
        price: 0,
        location: ''
      },
      currentComponent: 'MainContent'
    };
  },
  methods: {
    toggleCreateMenu() {
      this.isCreateMenuVisible = !this.isCreateMenuVisible;
    },
    openItemModal() {
      this.isItemModalVisible = true;
    },
    closeItemModal() {
      this.isItemModalVisible = false;
    },
    submitItemInfo() {
      console.log('提交的物品信息:', this.itemInfo);
      this.closeItemModal();
      this.itemInfo = {
        type: '',
        name: '',
        price: 0,
        location: ''
      };
    },
    openLocationModal() {
      this.isLocationModalVisible = true;
    },
    closeLocationModal() {
      this.isLocationModalVisible = false;
    },
    submitLocation(locationName) {
      console.log('提交的位置名称:', locationName);
      // 这里可以添加保存位置名称的逻辑
    },
    showOverview() {
      this.currentComponent = 'MainContent';
    },
    showLocations() {
      this.currentComponent = 'LocationsPage';
    }
  }
};
</script>

<style scoped>
/* 全局样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#app {
  display: flex;
  height: 100vh;
}

</style>